<template>
  <!-- 工单投料报表 -->
  <div class="page-container">
    <div class="common-content-wrap">
      <TrTable
        v-model="searchParams"
        :btnList="btnList"
        :searchShowList="searchShowList"
        :searchHideList="searchHideList"
        :tableData="tableData"
        :tableColumn="tableColumn"
        :total="totalNum"
        requestName="getList"
        @rowView="viewHandle($event)"
        @export="exportHandle"
      />
    </div>
    <TrDetail
      v-model="isShowDetailPopup"
      :leftList="detailList"
      statusModel="hidden"
      :detailData="detailData"
      :width="1227"
      :isNeedFooter="false"
    >
      <template #bomTable>
        <TrTable
          isPopup
          v-model="detailSearchParams"
          :tableData="detailTableData"
          :tableColumn="detailTableColumn"
          :isNeedPagination="false"
          requestName="detailSearchHandle"
        />
      </template>
    </TrDetail>
  </div>
</template>

<script>
import { getList, getDetailList } from "@/api/report/putMaterialReport.js";
import { getEnum } from "@/api/system/dict";
import { getStore } from "@/utils/store";
import TrDetail from "@/components/Tr-detail/Tr-detail.vue";
import TrTable from "@/components/Tr-table/Tr-table.vue";

export default {
  name: "putMaterialReport",
  components: {
    TrTable,
    TrDetail,
  },
  data: () => ({
    btnList: [
      {
        label: "导出",
        option: "export",
        color: "blue",
      },
    ],
    totalNum: 0,
    isShowDetailPopup: false,
    tableData: [],
    searchParams: {
      current: 1,
      size: 10,
    },
    detailSearchParams: {
      id: "",
    },
    searchShowList: [
      {
        isNeed: true,
        startStr: "createTimeStart",
        endStr: "createTimeEnd",
        id: "createdTime",
        type: "daterange",
        width: 80,
        label: "创建时间",
        value: [],
        radio: 1,
        timePeriod: true,
      },
    ],
    searchHideList: [
      {
        id: "workOrderId",
        label: "生产工单",
        type: "loadselect",
        value: "",
        width: 33.3,
        selectedLabel: "",
        requestObj: {
          url: "/api/mes-production-service/work-order/page",
          method: "post",
          searchKey: "workOrderCode",
          rlLabel: "workOrderCode",
          rlValue: "id",
          resultKey: "data,data,records",
        },
      },
      {
        id: "machineCode",
        label: "机台码",
        type: "loadselect",
        value: "",
        width: 33.3,
        selectedLabel: "",
        requestObj: {
          url: "/api/mes-equipment-service/device-ledger/page",
          method: "post",
          searchKey: "machineCode",
          rlLabel: "machineCode",
          rlValue: "machineCode",
          resultKey: "data,data,records",
        },
      },
      {
        id: "stationId",
        label: "工站名称",
        type: "loadselect",
        value: "",
        width: 33.3,
        selectedLabel: "",
        defaultParams: { isEnabledList: [1] },
        requestObj: {
          url: "/api/mes-production-service/work-station/page",
          method: "post",
          searchKey: "stationName",
          rlLabel: "stationName",
          rlValue: "id",
          resultKey: "data,data,records",
        },
      },
      {
        id: "prodOrgId",
        label: "车间名称",
        type: "loadselect",
        value: "",
        isShow: true,
        width: 33.3,
        currentErrorLabel: "请选择车间名称",
        errorStatus: false,
        selectedLabel: "",
        reviewLabel: "orgName",
        requestObj: {
          url: "/api/trio-system/prod-org/find-all-workshop",
          method: "post",
          searchKey: "orgName",
          rlLabel: "orgName",
          rlValue: "id",
          resultKey: "data,data",
        },
        defaultParams: {
          factoryId: getStore({ name: "factoryId" }),
        },
      },
      {
        id: "lineId",
        label: "线体名称",
        type: "loadselect",
        value: "",
        isShow: true,
        width: 33.3,
        currentErrorLabel: "请选择线体名称",
        errorStatus: false,
        selectedLabel: "",
        reviewLabel: "lineName",
        requestObj: {
          url: "/api/mes-production-service/line/page",
          method: "post",
          searchKey: "lineName",
          rlLabel: "lineName",
          rlValue: "id",
          resultKey: "data,data,records",
        },
      },
      {
        id: "processId",
        label: "工序名称",
        type: "loadselect",
        value: "",
        isShow: true,
        width: 33.3,
        currentErrorLabel: "请选择工序名称",
        errorStatus: false,
        selectedLabel: "",
        reviewLabel: "processName",
        requestObj: {
          url: "/api/mes-production-service/process/page",
          method: "post",
          searchKey: "processName",
          rlLabel: "processName",
          rlValue: "id",
          resultKey: "data,data,records",
        },
      },
      {
        id: "stateList",
        type: "multiSelect",
        width: 33.33,
        label: "状态",
        value: [],
        list: [],
      },
    ],
    tableColumn: [
      {
        type: "text",
        label: "生产工单",
        value: "workOrderCode",
      },
      {
        type: "text",
        label: "工艺路线",
        value: "routingName",
      },
      {
        type: "text",
        label: "成品料号",
        value: "materialCode",
      },
      {
        type: "text",
        label: "成品名称",
        value: "materialName",
      },
      {
        type: "text",
        label: "机台码",
        value: "machineCode",
      },
      {
        type: "text",
        label: "工站名称",
        value: "stationName",
      },
      {
        type: "text",
        label: "线体名称",
        value: "lineName",
      },
      {
        type: "text",
        label: "车间名称",
        value: "prodOrgName",
      },
      {
        type: "text",
        label: "工序名称",
        value: "processName",
      },
      {
        type: "text",
        label: "状态",
        value: "stateLabel",
      },
      {
        type: "text",
        label: "创建时间",
        value: "createUserName",
      },
      {
        type: "text",
        label: "创建人员",
        value: "createTime",
      },
      {
        type: "option",
        label: "操作",
        fixed: "right",
        width: 80,
        showBtnList: [
          {
            label: "查看",
            option: "rowView",
          },
        ],
      },
    ],
    detailTableData: [],
    detailData: {},
    detailList: [
      {
        type: "text",
        id: 1,
        label: "基础信息",
        list: [
          {
            text: "工单编号",
            id: "workOrderCode",
            width: 33.33,
          },
          {
            text: "工艺路线",
            id: "routingName",
            width: 33.33,
          },
          {
            text: "成品料号",
            id: "materialCode",
            width: 33.33,
          },
          {
            text: "成品名称",
            id: "materialName",
            width: 33.3,
          },
          {
            text: "机台码",
            id: "machineCode",
            width: 33.33,
          },
          {
            text: "工站名称",
            id: "stationName",
            width: 33.33,
          },
          {
            text: "线体名称",
            id: "lineName",
            width: 33.33,
          },
          {
            text: "车间名称",
            id: "prodOrgName",
            width: 33.33,
          },
          {
            text: "工序名称",
            id: "processName",
            width: 33.33,
          },
          {
            text: "状态",
            id: "stateLabel",
            width: 33.33,
          },
          {
            text: "创建人员",
            id: "createUserName",
            width: 33.33,
          },
          {
            text: "创建时间",
            id: "createTime",
            width: 33.33,
          },
        ],
      },
      {
        type: "slot",
        slotName: "bomTable",
        label: "投料明细",
        slotBottom: 32,
      },
    ],
    detailTableColumn: [
      {
        type: "text",
        label: "原料料号",
        value: "materialCode",
      },
      {
        type: "text",
        label: "物料名称",
        value: "materialName",
      },
      {
        type: "text",
        label: "物料标签",
        value: "barcode",
      },
      {
        type: "text",
        label: "数量",
        value: "num",
      },
      {
        type: "text",
        label: "数量单位",
        value: "numUnitCode",
      },
      {
        type: "text",
        label: "重量",
        value: "weight",
      },
      {
        type: "text",
        label: "重量单位",
        value: "weightUnitCode",
      },
      {
        type: "text",
        label: "创建人员",
        value: "createUserName",
      },
      {
        type: "text",
        label: "创建时间",
        value: "createTime",
      },
    ],
  }),
  methods: {
    async getList() {
      const { data: res } = await getList(this.searchParams);
      this.$validateData(res.data.records);
      this.tableData = res.data.records;
      this.totalNum = res.data.total;
    },
    exportHandle() {
      this.$exportHandle({ vm: this, params: this.searchParams });
    },
    async viewHandle(val) {
      this.detailData = val;
      await this.getDetailList();
      this.isShowDetailPopup = true;
    },
    async getDetailList() {
      this.detailSearchParams.id = this.detailData.id;
      const { data: res } = await getDetailList(this.detailSearchParams);
      this.$validateData(res.data.putMaterialDetailRespList);
      console.log("ta====>", res);

      this.detailTableData = res.data.putMaterialDetailRespList;
      // this.detailTableData.forEach((item) => {
      //   item.newNumUnit = `${item.numUnitCode}(${item.numUnitName})`;
      //   item.newWeightUnit = `${item.weightUnitCode}(${item.weightUnitName})`;
      // });
      // this.detailTotal = res.data.total;
    },
    detailSearchHandle() {
      this.getDetailList();
    },
    async getWipReportStateList() {
      getEnum(["putMaterialStateEnum"]).then((res) => {
        if (res.data.code != 200) return;
        let state = this.$findByProperty(
          this.searchHideList,
          "id",
          "stateList"
        );
        this.$set(state, "list", res.data.data[0].list);
      });
    },
  },
  created() {
    this.getWipReportStateList();
  },
};
</script>
